<template>
	<view style="width: 100%;">
		<view class="page-box">
			<view class="tab-box">
				<view class="tab-item" v-for="(item,index) in tabList" :key="index" @click="tabClick(index)">
					{{item.label}}
				</view>
				<view class="tab-line" :style="[tabLineStyle]"></view>
			</view>
			<view class="page-con">
				<view class="item_top1">
					<text class="top_left">{{earlyInfor}}</text>
					<view class="top_right" @click="replaceClick">
						<image class="back" src="/static/img/back.png"></image>
						<text class="top_right">{{msgtoast}}</text>
					</view>
				</view>
				<!-- 企业信息 -->
				<view style="padding-bottom: 20rpx;" v-if="tabIndex ==0 && isShow">
					<view v-for="(item,index) in listData">
						<!-- 基本信息 -->
						<view class="list_item" @click="itemClick(item)">
							<view class="item_top">
								<text class="top_left">{{item.warningInfo}}</text>
							</view>

							<view class="item_top">
								<text class="top_left"
									style="font-size: 26rpx;color: #CA2828;">{{item.inspObjName}}</text>
								<text class="bottom_center"
									style="font-size: 26rpx;color: #999999;">{{item.warningTime}}</text>
							</view>

							<view class="item_top">
								<text class="top_left"
									style="font-size: 26rpx;color: #1590EF;">{{item.warningTypeStr}}</text>
								<text class="top_right"
									style="color: #757575;font-size: 26rpx;">{{item.warningCategoryStr}}</text>
							</view>
						</view>

					</view>
				</view>
				<view class="bing_view">
					<view class="charts-box" v-if="!isIndex && !isShow">
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					</view>
				</view>
				<dynamic v-if="isIndex" ref="dynamic" :dataList='warningList'></dynamic>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		warningMsgQuery,
		pieCharts,
		warningPage
	} from '@/common/api/req.js'
	import dynamic from './components/dynamic.vue'
	export default {
		components: {
			dynamic
		},
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},

				isShow: true,
				msgtoast: '切换图标',
				earlyInfor: '静态预警',
				src1: "/static/index/tj_icon.png",
				list1: [{
					name: '企业信息',
				}, {
					name: '企业违章信息',
				}],
				current: 0,
				listData: [],
				dynamicData: [],
				current: 1,
				size: 10,
				isloading: false,
				pieData: [{
					"name": "证照超期",
					"value": 0
				}, {
					"name": "异地经营",
					"value": 0
				}, {
					"name": "安全运营",
					"value": 0
				}],
				options: {},
				inspObjName: "",
				warningType: "",
				tabIndex: 0,
				tabList: [{
					label: '静态预警',
					component: "province",
				}, {
					label: '动态预警',
					component: "province",
				}],
				isIndex: false,
				tablePages: {
					current: 1,
					size: 10,
					total: 0,
				},
				dataList: {
					inspObjName: "",
					warningType: ""
				},
				warningList: {
					inspObjName: "",
					warningType: ""
				}

			};
		},
		// onLoad(option) {
		// 	this.options = option.data
		// 	this.dataList.inspObjName = option.inspObjName
		// 	this.dataList.warningType = option.warningType
		// 	console.log(22,option)
		// 	// if (option.index) {
		// 	// 	if (option.index == 0) {
		// 	// 		if (option.data) {
		// 	// 			this.listData = JSON.parse(option.data)
		// 	// 		}
		// 	// 	} else {
		// 	// 		this.tabClick(1)
		// 	// 	}
		// 	// }
		// },
		mounted() {
			this.getdata()
			this.getpieCharts()
		},
		// 下拉刷新
		onPullDownRefresh() {
			// this.isloading = true
			// warningMsgQuery({
			// 	size: this.size,
			// 	current: 1,
			// 	inspObjName: this.dataList.inspObjName,
			// 	warningType: this.dataList.warningType
			// }).then(res => {
			// 	this.listData = res.data.data.records
			// 	this.isloading = false
			// })
			uni.stopPullDownRefresh()
		},
		onReady() {
			this.getServerData();
		},
		computed: {
			// 计算tabline的位置和宽度
			tabLineStyle() {
				let width = 100 / this.tabList.length;
				return {
					width: width + '%',
					left: width * this.tabIndex + '%',
				}
			}
		},
		methods: {
			reload(option) {
				// this.options = option.data
				if (option.index == 0) {
					this.dataList.inspObjName = option.inspObjName
					this.dataList.warningType = option.warningType
					warningMsgQuery({
						size: 10,
						current: 1,
						inspObjName: option.inspObjName,
						warningType: option.warningType
					}).then(res => {
						this.listData = res.data.data.records
					})
				} else {
					this.warningList.inspObjName = option.inspObjName
					this.warningList.warningType = option.warningType
					this.tabClick(1)
					this.$refs.dynamic.search(this.warningList)
				}
			},
			// tab切换
			tabClick(index) {
				this.tabIndex = index
				if (index == 0) {
					this.isShow = true
					this.isIndex = false
					this.earlyInfor = '静态预警'
					this.getdata()
				} else {
					this.isIndex = true
					this.isShow = false
					this.earlyInfor = '动态预警'
				}
			},
			getpieCharts() {
				pieCharts({}).then(res => {
					let warningAqyyCount = res.data.data.warningAqyyCount
					let warningYdyyCount = res.data.data.warningYdyyCount
					let warningZjcqCount = res.data.data.warningZjcqCount

					let sumCount = parseInt(warningAqyyCount) + parseInt(warningYdyyCount) + parseInt(
						warningZjcqCount)


					this.opts.subtitle.name = sumCount + "条"
					let AqyyCount = parseInt(warningAqyyCount) / sumCount
					let YdyyCount = parseInt(warningYdyyCount) / sumCount
					let ZjcqCount = parseInt(warningZjcqCount) / sumCount
					this.pieData = [{
						"name": "证照超期",
						"value": ZjcqCount
					}, {
						"name": "异地经营",
						"value": YdyyCount
					}, {
						"name": "安全运营",
						"value": AqyyCount
					}]
				})
			},
			// 触低加载
			onReachBottom() {
				if (this.tabIndex == 0) {
					if (this.isloading) return
					this.current += 1
					warningMsgQuery({
						size: this.size,
						current: this.current,
						inspObjName: this.dataList.inspObjName,
						warningType: this.dataList.warningType
					}).then(res => {
						this.listData.push(...res.data.data.records)
						this.isloading = false
					})
				} else {
					this.tablePages.current += 1
					warningPage({
						size: 10,
						current: this.tablePages.current,
						ownerName: this.warningList.inspObjName,
						warningType: this.warningList.warningType
					}).then(res => {
						this.$refs.dynamic.listData.push(...res.data.data.records)
					})
				}

			},

			// // 监听点击右上角事件
			onNavigationBarButtonTap(e) {
				this.$goBack('../warning/index?tabIndex=' + this.tabIndex, 2);
			},
			getdata() {
				this.isloading = true
				warningMsgQuery({
					size: this.size,
					current: this.current,
					inspObjName: "",
					warningType: ""
				}).then(res => {
					let data = res.data.data.records
					this.listData = data
					this.isloading = false
				})
			},

			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: this.pieData
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			itemClick(item) {
				if (item.warningType == '1') {
					this.$goBack('../warning/jyxkz_yq?item=' + encodeURIComponent(JSON.stringify(item)), 2);
				} else if (item.warningType == '2') {
					this.$goBack('../warning/dlysyq?item=' + encodeURIComponent(JSON.stringify(item)), 2);
				} else if (item.warningType == '3') {
					this.$goBack('../warning/clnsyq?item=' + encodeURIComponent(JSON.stringify(item)), 2);
				} else if (item.warningType == '4') {

					this.$goBack('../warning/pdyq?item=' + encodeURIComponent(JSON.stringify(item)), 2);
				} else if (item.warningType == '5') {
					this.$goBack('../warning/gtyxqyq?item=' + encodeURIComponent(JSON.stringify(item)), 2);


				} else if (item.warningType == '6') {
					this.$goBack('../warning/cyzgz_yq?item=' + encodeURIComponent(JSON.stringify(item)), 2);
				} else if (item.warningType == '7') {
					this.$goBack('../warning/ydjy?item=' + encodeURIComponent(JSON.stringify(item)), 2);
				} else if (item.warningType == '8') {
					this.$goBack('../warning/wtbcyr?item=' + encodeURIComponent(JSON.stringify(item)), 2);
				} else if (item.warningType == '9') {
					this.$goBack('../warning/car_num_Insufficient?item=' + encodeURIComponent(JSON.stringify(item)), 2);
				} else if (item.warningType == '11') {
					this.$goBack('../warning/yydwgj?item=' + encodeURIComponent(JSON.stringify(item)), 2);
				} else if (item.warningType == '12') {
					this.$goBack('../warning/wydygj?item=' + encodeURIComponent(JSON.stringify(item)), 2);
				} else if (item.warningType == '13') {
					this.$goBack('../warning/ydgjbf?item=' + encodeURIComponent(JSON.stringify(item)), 2);
				}
			},
			replaceClick() {

				if (this.tabIndex == 0) {
					if (this.isShow) {
						this.isShow = false
						this.msgtoast = '切换列表'
					} else {
						this.isShow = true

						this.msgtoast = '切换图标'
					}
				} else {
					if (this.isShow) {
						this.isShow = false
						this.isIndex = false
						this.msgtoast = '切换列表'
					} else {
						this.isShow = true
						this.isIndex = true
						this.msgtoast = '切换图标'
					}
				}

			}




		}
	}
</script>


<style lang="scss">
	page {
		background-color: #EFEFEF;
	}

	.bing_view {
		background-color: #fff;
		margin: 10px 20px;
		border-radius: 10px;

		.charts-box {
			width: 100%;
			height: 300px;
		}
	}


	.btn {
		position: absolute;
		bottom: 30px;
		left: 25%;
		text-align: center;
		width: 400rpx;
		height: 80rpx;
		background-color: #148AE4;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;

		text {
			font-size: 32rpx;
			color: #fff;
		}

	}

	.topview {
		padding: 10px 15px;
		background-color: #fff;
		position: sticky;
		z-index: 999;
		top: 0;


		.u-search__content {
			padding: 5px 10px;
		}
	}


	.item_top1 {
		width: calc(100% - 40px);
		display: flex;
		justify-content: space-between;
		padding: 10px 20px 0px 20px;


		.top_left {
			font-size: 16px;
			color: #1590EF;
		}


		.top_right {
			display: flex;
			align-items: center;

			.back {
				height: 14px;
				width: 18px;
			}

			.top_right {
				font-size: 13px;

			}
		}

	}



	.list_item {
		border-radius: 10px;
		background-color: #FFFFFF;
		margin: 10px 20px 0 20px;
		padding-bottom: 5px;
		padding: 10px;

		.item_top {
			margin-bottom: 14rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.top_left {
				font-size: 16px;

			}

			.top_right {
				font-size: 13px;
				color: #1590EF;
			}
		}

		.item_bottom {
			width: 100%;
			display: flex;
			margin-top: 10px;
			align-items: center;
			justify-content: space-around;

			.bottom_left {
				font-size: 13px;
				color: #CA2828;
			}


			.bottom_center {
				font-size: 13px;
				color: #999999;
			}

			.bottom_right {
				font-size: 13px;
				color: #333333;
			}
		}
	}

	.page-box {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.tab-box {
			display: flex;
			position: relative;
			z-index: 9999;

			.tab-item {
				flex: 1;
				font-size: 32rpx;
				line-height: 2.6em;
				text-align: center;
				background-color: #fff;

				&.cur {
					color: #5881dc;
				}
			}

			.tab-line {
				position: absolute;
				bottom: 0;
				height: 2px;
				background: #5881dc;
				transition: left 0.4s;
			}
		}

		.page-con {
			flex: 1;
			position: relative;
		}
	}
</style>
